<!-- 开关改名 -->
<template>
  <div class='switch-rename'>
    <van-nav-bar title="开关改名" left-arrow @click-left="() => $router.go(-1)" safe-area-inset-top>
      <template #left>
        <img style="width: 25px" src="../../assets/images/返回2.png" alt="" />
      </template>
    </van-nav-bar>

    <!-- 内容 -->
    <div class="list">
      <div class="li">
        <div>开关1</div>
        <div>
          <span>改名为：</span>
          <van-field v-model="content.sw1" placeholder="请输入名称" />
        </div>
      </div>
      <div class="li">
        <div>开关2</div>
        <div>
          <span>改名为：</span>
          <van-field v-model="content.sw2" placeholder="请输入名称" />
        </div>
      </div>
      <div class="li">
        <div>开关3</div>
        <div>
          <span>改名为：</span>
          <van-field v-model="content.sw3" placeholder="请输入名称" />
        </div>
      </div>
      <div class="li">
        <div>开关4</div>
        <div>
          <span>改名为：</span>
          <van-field v-model="content.sw4" placeholder="请输入名称" />
        </div>
      </div>



      <div class="btn">
        <van-button round block type="info" @click="onSubmit"
          color="linear-gradient(to right, rgb(120, 184, 246), rgb(29,97,214))" style="font-size: 20px">保 存</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { deviceInfo, deviceSwUpdateName } from "../../api/device";
export default {
  name: '',
  data() {
    return {
      info: {},
      content: {}
    }
  },
  methods: {
    async getData() {
      let res = await deviceInfo({ code: this.$route.query.code });
      if (res.status == 200) {

        let data = res.data;
        console.log("device", data)

        this.content = JSON.parse(data.content);


      }
    },
    async onSubmit() {


      let res = await deviceSwUpdateName({ json: JSON.stringify(this.content), code: this.$route.query.code });
      if (res.status == 200) {

        this.$toast("修改成功");
        setTimeout(() => {
          this.$router.back();
        }, 500);


      }

    }
  },
  computed: {

  },
  watch: {

  },
  created() {
    this.getData();
  },
  mounted() {

  },
}
</script>

<style lang='scss' scoped>
.switch-rename {
  width: 100%;
  height: 100%;

  .list {
    width: 94%;
    margin: 20px auto;

    .btn {
      width: 50%;
      margin: 0 auto;
      margin-top: 100px;
    }

    .li {
      background-color: #fff;
      border-radius: 15px;
      padding: 30px 20px;
      font-size: 26px;

      >:first-child {
        font-weight: 500;
      }

      >:last-child {
        color: rgb(100, 100, 100);
        display: flex;
        align-items: center;

        >:last-child {
          border-bottom: 1px solid #ccc;
        }

        span {
          width: 20%;
        }
      }
    }
  }
}
</style>
